import React from 'react';
import { useRoutes } from 'react-router-dom';

import { useDispatch } from 'react-redux';
import { setChildrenRoutes } from './slices/routeSlice';
import routes from './router/index'; // 导入路由配置

function App() {
  const dispatch = useDispatch();
  const element = useRoutes(routes);


  React.useEffect(() => {
    if (element && element.props && element.props.match && element.props.match.route && element.props.match.route.children) {
      const childrenMeta = element.props.match.route.children.map((item) => {
        return {
          path: item.path,
          meta: item.meta,
        };
      });
      dispatch(setChildrenRoutes(childrenMeta));
    }
  }, [dispatch, element]);

  // console.log("🚀 ~ App ~ element:", element.props.match.route.children);
  return element;
}

export default App;